<template>
  <div class="cleaning_1">
    <div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          height: 75px;
          letter-spacing: 5px;
        "
      >
        未完成订单
      </div>
    </div>
    <!-- <u-tabs lineColor="#00BAAD" :list="tabList" @click="tabChange"></u-tabs> -->
    <van-search
      @clear="GetXXClear"
      @search="GetXX"
      margin="0 10px 20px 10px"
      height="80px"
      :showAction="false"
      placeholder="请输入订单号、手机号或姓名关键词信息"
      shape="round"
      v-model="orderNumber"
    ></van-search>
    <div class="list_outside">
      <div class="list_head">共{{ total }}个订单</div>
      <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
        <van-empty v-if="list.length == 0 && !error" image="search" description="未找到数据" />
        <van-empty v-if="error" image="error" description="网络错误" />
        <van-list
          :immediate-check="false"
          :loading="loading"
          :finished="finished"
          :error="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
          style="margin-top: 10px"
        >
          <div class="list" v-for="(item, index) in list" :key="index" @click="TZXQ(item)">
            <div class="order_list">
              <div style="display: flex; justify-content: space-between">
                <div style="width: 100%">
                  <div class="title" style="display: flex; justify-content: space-between">
                    <div style="display: flex">
                      <van-icon name="calendar-fill" color="#00BAAD" size="28"></van-icon>
                      <span
                        style="color: #00baad; font-size: 18px; line-height: 30px; margin-top: 10px"
                        >{{ item.orderType }}</span
                      >
                    </div>
                  </div>
                  <div class="item">
                    <span style="color: #606266">姓名：</span>
                    <span>{{ item.userName }}</span>
                  </div>
                  <div class="item">
                    <span style="color: #606266">订单号：</span>
                    <span>{{ item.orderNumber }}</span>
                  </div>
                  <div class="item">
                    <span style="color: #606266">下单时间：</span>
                    <span>{{ item.creationTime }}</span>
                  </div>
                  <div class="item_cancel" v-if="orderStatus == '0'">
                    <div style="width: 100px">
                      <van-button @click="QXDD(item)" size="small" type="warning"
                        >取消订单</van-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <template #error>
            <div class="error-tip" @click="retryLoad">
              <van-icon name="warning" />
              <span>加载失败，点击重试</span>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {
  getServiceOrderAdminList,
  updateServiceOrderAdmin
} from "@/api/realAssets/icsharedstation/DD/index.js"
import { getpersonalInformation } from "../../common/RYXX"
import { Dialog, Toast } from "vant"

export default {
  data() {
    return {
      title: "订单管理",
      total: 0,
      orderList: [],
      orderStatus: "0",
      DDH: "",
      id: "",
      orderNumber: "", // 可接收订单编号手机号姓名
      showTC: false,
      loading: false,
      refreshing: false,
      error: false,
      finished: false,
      list: [],
      XXyz: {
        userId: JSON.parse(getpersonalInformation()).userId,
        orderStatus: "0",
        postId: JSON.parse(getpersonalInformation()).postId,
        pageNumber: 1,
        pageSize: 10,
        siteId: "",
        orderNumber: this.orderNumber,
        orderTime: ""
      }
    }
  },
  methods: {
    TZXQ(val) {
      let li = encodeURIComponent(JSON.stringify(val))
      this.$router.push({
        url: "/pages/AdminPages/DDXQ/index?YYXQxx=" + li
      })
    },
    onLoad() {
      this.loading = true
      if (this.error) return // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = []
      }
      console.log(this.XXyz)
      getServiceOrderAdminList(this.XXyz).then((res) => {
        console.log(res)
        if (res.resultMessage != "SUCCESS") {
          this.list = []
          this.error = true // 显示错误提示
        } else if (res.data.length == 0) {
          this.list = []
          this.finished = true
        } else {
          this.total = res.pageNum
          this.list = [...this.list, ...res.data]
          // list.value = res.data;
          // generateQRCode()
        }
        this.loading = false
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true
        } else {
          this.XXyz.pageNumber++
        }
        // 加载状态结束

        this.refreshing = false
      })
    },
    QXDD(val) {
      this.showTC = true
      this.id = val.id
      this.DDH = val.orderNumber
      Dialog.confirm({
        title: "是否取消当前订单",
        message: "订单号为：【' + DDH + '】（取消后本订单将失效）"
      })
        .then(() => {
          this.QRZC()
        })
        .catch(() => {
          this.showTC = false
        })
    },
    QRZC() {
      this.showTC = false
      updateServiceOrderAdmin({
        id: this.id,
        orderStatus: "-1"
      }).then((res) => {
        if (res.data == "SUCCESS") {
          // uni.showToast({
          //   title: "取消成功",
          //   icon: "success",
          //   duration: 2000
          // })
        }
      })
    },
    GetXX() {
      this.XXyz.pageNumber = 1
      this.XXyz.pageSize = 10
      this.onLoad()
    },
    GetXXClear() {
      this.XXyz.orderNumber = ""
      this.GetXX()
    },
    onRefresh() {
      this.list = []
      this.XXyz.pageNumber = 1
      this.XXyz.pageSize = 10
      this.finished = false
      this.error = false
      this.loading = true
      this.refreshing = true
      this.onLoad()
    }
  },
  mounted() {
      this.onLoad()
    }
}
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
.cleaning_1 {
  height: 100%;
  width: 100%;
  background: url("../../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.list_outside {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  padding-bottom: 15px;
}

.list_head {
  margin: 0 0 10px 20px;
  padding-top: 10px;
  color: #999999;
  font-size: 14px;
}

.list {
  padding: 0px 10px 10px 10px;
  box-sizing: border-box;
}

.order_list {
  border-radius: 10px;
  padding: 0px 10px 10px 10px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;

  .item {
    font-size: 15px;
    margin: 5px 0 5px 0;
  }

  .item_cancel {
    display: flex;
    flex-direction: row-reverse;
  }
}

.custom-style {
  color: #fff;
  background: #36c2a8;
}
.van-search {
  background: none;
}
.pull-refresh {
  height: calc(
    var(--real-vh, 1vh) * 100 - 210px - env(safe-area-inset-bottom) - env(safe-area-inset-top)
  );
  padding-top: 10px;
  box-sizing: border-box;
}
</style>
